<template>
  <div class="forgot-password-container">
    <el-card class="forgot-password-card">
      <h2 class="title">找回密码</h2>

      <!-- 邮箱输入框 -->
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>

        <!-- 获取验证码 -->
        <el-form-item label="验证码" prop="code">
          <el-input v-model="form.code" placeholder="请输入验证码" style="width: 60%" />
          <el-button
            :disabled="countdown > 0"
            @click="sendCode"
          >{{ countdown > 0 ? `${countdown}s 后重发` : '获取验证码' }}</el-button>
        </el-form-item>

        <!-- 新密码 -->
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>

        <!-- 确认新密码 -->
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            type="password"
            show-password
            placeholder="请确认新密码"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">重置密码</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { resetPassword } from "@/api/login";

export default {
  data() {
    return {
      form: {
        email: "",
        code: "",
        newPassword: "",
        confirmPassword: ""
      },
      rules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" }
        ],
        confirmPassword: [
          {
            required: true,
            message: "请确认新密码",
            trigger: "blur"
          }
        ]
      },
      countdown: 0, // 倒计时
      timer: null
    };
  },
  methods: {
    // 发送验证码
    async sendCode() {
      if (!this.form.email) {
        ElMessage.error("请输入邮箱");
        return;
      }
      try {
        await sendForgotPasswordCode(this.form.email);
        ElMessage.success("验证码已发送，请查收邮件");

        // 开启倒计时
        this.countdown = 60;
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--;
          } else {
            clearInterval(this.timer);
          }
        }, 1000);
      } catch (error) {
        ElMessage.error(error.response?.data?.msg || "验证码发送失败");
      }
    },

    // 提交找回密码表单
    async submitForm() {
      if (
        !this.form.email ||
        !this.form.code ||
        !this.form.newPassword ||
        !this.form.confirmPassword
      ) {
        ElMessage.error("请填写完整信息");
        return;
      }
      if (this.form.newPassword !== this.form.confirmPassword) {
        ElMessage.error("两次输入的密码不一致");
        return;
      }

      try {
        // 先校验验证码
        await verifyForgotPasswordCode(this.form.email, this.form.code);

        // 进行密码重置
        await resetPassword(
          this.form.email,
          this.form.code,
          this.form.newPassword
        );
        ElMessage.success("密码重置成功，请使用新密码登录");

        // 跳转到登录页
        this.$router.push("/login");
      } catch (error) {
        ElMessage.error(error.response?.data?.msg || "密码重置失败");
      }
    },

    // 返回登录页
    goBack() {
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
.forgot-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

.forgot-password-card {
  width: 400px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
